<template>
  <div>
    <vxe-table
      resizable
      row-id="Id"
      border
      :data="value.grid.datalist"
      :tree-config="{children: 'children', accordion: true, line: true}"
    >
      <vxe-table-column :title="value.grid.treenode.label" :field="value.grid.treenode.prop" tree-node />
      <vxe-table-column v-for="item in value.grid.normalitems" :key="item.Id" :title="item.label" :field="item.prop" />
      <vxe-table-column v-if="value.grid.operationitem.length > 0" title="操作" :width="value.grid.operationitem.length * 80">
        <template v-slot="{ row }">
          <vxe-button
            v-for="item in value.grid.operationitem"
            v-show="show(item.show,row)"
            :key="item.Id"
            type="text"
            size="mini"
            :text="item.name"
            @click="itemclick(item.method,row)"
          >
            <i class="el-icon--right" :class="item.icon" />&nbsp;{{ item.name }}
          </vxe-button>
        </template>
      </vxe-table-column>
    </vxe-table>
  </div>
</template>
<script>
export default {
  props: {
    value: {
      type: Object,
      // eslint-disable-next-line vue/require-valid-default-prop
      default: {}
    }
  },
  methods: {
    itemclick(method, row) {
      if (typeof (method) === 'function') {
        method(row)
      }
    },
    show(method, row) {
      if (typeof (method) === 'function') {
        return method(row)
      } else {
        return true
      }
    }
  }
}
</script>
